<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    :before-close="handleClose"
    width="30%"
  >
    <el-form :model="ruleForm" status-icon label-width="0px">
      <el-form-item>
        <el-radio-group v-model="ruleForm.radio">
          <el-radio :label="1">By File</el-radio>
          <el-radio :label="0">By Folder</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-upload
          :before-upload="beforeZipUpload"
          :limit="1"
          :file-list="fileList"
          action="https://jsonplaceholder.typicode.com/posts/"
          multiple
        >
          <el-button type="primary">点击上传</el-button>
        </el-upload>
      </el-form-item>
      <el-form-item>
        <el-checkbox v-model="ruleForm.checked">是否同时上传解压文件</el-checkbox>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button
        type="primary"
        icon="el-icon-upload"

        @click="dialogVisible = false">上 传</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  name: 'UploadForm',
  components: {},
  mixins: [],
  props: {
    title: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      dialogVisible: false,
      ruleForm: {},
      fileList: []
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    //   打开弹窗
    openDialog() {
      this.dialogVisible = true
    },
    beforeZipUpload(file) {
      const isZip = file.type === 'application/zip'
      if (!isZip) {
        this.$message.error('上传文件只能是 zip 格式!')
      }
      return isZip
    },
    handleClose() {
      Object.assign(this.$data, this.$options.data.call(this))
    }
  }
}
</script>

<style scoped lang="scss">
.el-form{
    box-sizing: border-box;
    padding-left: 40px;
}
::v-deep .el-dialog__body{
    padding-bottom: 0;
}
</style>
